<template>
    <div>
        <table class="mytable">
          <tr>
            <th>网名：</th>
            <td><input type="text" disabled :value=user.loginname></td>
          </tr>

          <tr>
            <th>姓名：</th>
            <td><input type="text" disabled :value=user.name></td>
          </tr>

          <tr>
            <th>年龄：</th>
            <td><input type="text" disabled :value=user.age></td>
          </tr>
          
          <tr>
            <th>性别：</th>
            <td><input type="radio" disabled :value="user.sex" checked="checked">
              {{user.sex!=""?user.sex :"男"}}
            </td>
          </tr>
          <tr>
            <th>邮箱：</th>
            <td><input type="text" disabled :value=user.email></td>         
          </tr>

          <tr>
            <th>个性签名：</th>
            <td><input type="text" disabled :value=user.signature></td>     
          </tr>
        
        <!-- 修改头像 -->
          <tr>
             <el-button type="text" @click="headImgVisible = true" class="el-icon-picture-outline-round">修改头像</el-button>
          </tr>
          <!-- 修改我的信息 -->
          <tr>

            <el-button type="text" @click="dialogVisible = true" class="el-icon-s-tools">修改我的信息</el-button>
            <!-- <span class="el-icon-s-tools">修改我的信息</span> -->

          </tr>

          <tr>
           <el-button type="text" @click="PasswordVisible = true" class="el-icon-question">修改密码</el-button>
            <!-- <span class="el-icon-question">修改密码</span> -->
          </tr>
        </table>

        <!-- 修改头像 -->
      <el-dialog
          title="修改个人信息"
          :visible.sync="headImgVisible"
          width="30%"
          :append-to-body=true
          :before-close="handleClose">
          <table class="settable">
            <tr>
              <th>头像：</th>
              <td><input type="file" id="headImg"  ></td>
            </tr>
          </table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="headImgVisible = false">取 消</el-button>
            <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
            <el-button type="primary" @click="setHeadImg">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 修改我的信息 -->
        <el-dialog
          title="修改个人信息"
          :visible.sync="dialogVisible"
          width="30%"
          :append-to-body=true
          :before-close="handleClose">
          <table class="settable">
            <tr>
              <th>网名：</th>
              <td><input type="text"  :placeholder="user.loginname" v-model="loginname"></td>
            </tr>

            <tr>
              <th>姓名：</th>
              <td><input type="text"  :placeholder="user.name" v-model="name"></td>
            </tr>

            <tr>
              <th>年龄：</th>
              <td><input type="text"  :placeholder="user.age" v-model="age"></td>
            </tr>

            <tr>
            <th>性别：</th>
            <td>
              <input type="radio"  value="男" id="sex" name="sex" checked>男
              <input type="radio"  value="女" id="sex" name="sex" >女
            </td>
          </tr>
            <tr>
              <th>邮箱：</th>
              <td><input type="text"  :value="user.email" disabled ></td>         
            </tr>

            <tr>
              <th>个性签名：</th>
              <td><input type="text"  :placeholder="user.signature" v-model="signature"></td>     
            </tr>
          </table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
            <el-button type="primary" @click="postURL">确 定</el-button>
          </span>
        </el-dialog>



        <!-- 修改密码 -->
        <el-dialog
          title="修改个人信息"
          :visible.sync="PasswordVisible"
          width="30%"
          :append-to-body=true
          :before-close="handleClose">
            <table class="setpassword">
              <tr>
                <el-input placeholder="请输入旧密码" v-model="oldpassword" show-password></el-input>
              </tr>
              <tr>
                <el-input placeholder="请输入新密码" v-model="newpassword" show-password></el-input>
              </tr>
              <tr>
                <el-input placeholder="再次输入新密码" v-model="twopassword" show-password></el-input>
              </tr>
            </table>
            <span slot="footer" class="dialog-footer">
              <el-button @click="PasswordVisible = false">取 消</el-button>
              <el-button type="primary" @click="setPassword">确 定</el-button>
            </span>
          </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
      return {
        // myuser:"",
        headImgVisible:false,//修改头像按钮
        dialogVisible  : false,//修改个人信息
        PasswordVisible : false,//修改密码
        oldpassword:"",
        newpassword:"",
        twopassword:"",
        setUserUrl:this.pathUrl.setUserUrl,//修改个人信息路径
        setHeadImgUrl:this.pathUrl.setHeadImgUrl,//修改头像
        setPasswordUrl:this.pathUrl.setPasswordUrl,
        // setUserUrl:"http://localhost:3003/api/user/setuser",//修改个人信息路径
        // setHeadImgUrl:"http://localhost:3003/api/media/setheading",//修改头像
        // setPasswordUrl:"http://localhost:3003/api/user/setPassword",
        loginname:"",//网名，可能为空
        name:"",//可能为空
        sex:"",
        age:"",//可能为空
        email:"",
        signature:"",//可能为空
      }
    },
    props:['user'],
    methods: {
      //关闭遮蔽层
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      /**
       * 获取用户信息
       */
      // getuser(){
      //   this.myuser=this.user
      //   console.log(this.myuser)

      // },
      /**
       * 成功提示
       */
      open2(message) {
        this.$message({
          showClose: true,
          message,
          type: 'success',
          duration:1500,
        });
      },
      /**
       * 失败提示
        */     
      open4(message) {
        this.$message({
          showClose: true,
          message: message,
          type: 'error',
          duration:1500,
        });
      },
      // 获取性别
      getsex(){
        // checked="checked"
        var sex=document.querySelectorAll("#sex")
        for (var i = 0; i < sex.length; i++) {
          // console.log(sex)
          if(sex[i].checked == "checked" || sex[i].checked==true )
          {
            console.log(sex[i].value)
            this.sex=sex[i].value
          }
          else
          {
            console.log("没选中性别")
          }
        }
      },
      //设置其他属性
      getNature(){
        if(this.loginname==""){
          this.loginname=this.user.loginname
        }
        if(this.name==""){
          this.name=this.user.name
        }
        if(this.age==""){
          this.age=this.user.age
        }
        if(this.signature==""){
          this.signature=this.user.signature
        }
      },
      /**
       * 修改头像
       */
      setHeadImg(){
        console.log("账号："+this.user.loginId+"密码："+this.user.loginPassword)
        const formdata = new FormData()
        formdata.append(document.querySelector("#headImg").files[0].name,document.querySelector("#headImg").files[0])//加入图片 
        formdata.append('loginId',this.user.loginId)//加入账户id
        formdata.append('loginPassword',this.user.loginPassword)//加入密码
        // console.log(document.querySelector("#headImg").files[0])
        //定义上传文件的头文件格式
        const config = {
          headers:{"Content-Type":"multipart/form-data"}
        }
        // console.log(this.setHeadImgUrl)查看路径
        this.$axios.post(this.setHeadImgUrl,formdata,config)//上传到服务器中
        .then(r=>{
          console.log(r)//查看放回结果
          // console.log("获取成功")
          this.open2("刷新，请稍等")
          location.reload();
          this.$emit("login")

        })
        .catch(r=>{
          // console.log("获取失败")
        })
        this.headImgVisible = false
      },
      //修改个人信息
      postURL(){
        this.getsex()
        this.getNature()
        // this.user.loginname=this.loginname,
        // this.user.name=this.name
        // this.user.age=this.age
        // this.user.signature=this.signature
        // thisyuser.sex=this.sex
        localStorage.setItem("user",JSON.stringify(this.user))

        this.$axios.post(this.setUserUrl,{
          loginId:this.user.loginId,  //登录id
          loginPassword:this.user.loginPassword,//获取密码
          loginname:this.loginname,  //网名
          name:this.name,  //姓名
          age:this.age,  //年龄
          sex:this.sex, //性别
          email:this.user.email,  //邮箱
          signature:this.signature,  //个性签名
        })
        .then(r=>{
          console.log(r)
          if(r.data.statue=="ok"){
            this.open4(r.data.msg) 
          }
          else{
            this.open2(r.data.msg)
          }
          location.reload(); 
        })
        .catch(r=>{
          this.open2("连接失败")
        })
          this.dialogVisible = false
      },
        /**
         * 修改密码
         */
        setPassword(){
          if(this.oldpassword == ""){
            this.open4("请输入旧密码")
            return
          }
          else if(this.oldpassword != this.user.loginPassword){
            this.open4("旧密码错误")
            return
          }
          else if(this.newpassword == ""){
            this.open4("请输入新密码")
            return
          }
          else if(this.twopassword == ""){
            this.open4("请再次输入新密码")
            return
          }
          else if(this.newpassword != this.twopassword){
            this.open4("两次密码不一样")
            return
          }
          else{
            this.$axios.post(this.setPasswordUrl,{
              loginId:this.user.loginId,
              oldpassword:this.oldpassword,
              newpassword:this.newpassword,
            })
            .then((r)=>{
              console.log(r)
              if(r.data.status=="ok"){
                this.open2(r.data.msg)
                this.PasswordVisible=false  
                location.reload()              
              }
              else{
                this.open4("修改密码失败")
              }
            })
            .catch((r)=>{
              console.log("修改失败"+r)
            })
          }
        }
    },
    // mounted(){
    //   this.getuser()
    // },
    watch: {
           //正确给 mothed 赋值的 方法
      user: function(newVal,oldVal){
            newVal && this.$emit("login"); //newVal存在的话执行this.getpageCon()函数

        },
    },
    components: {},
}
</script>

<style scoped>
.mytable{
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.mytable>tr{
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.mytable>tr>th{
  flex: 1;  
  text-align: justify;
  font-weight: normal;
}
.mytable>tr>td{
  height: 80%;
}
tr>span{
  /* color: #0000; */
  font-weight: bolder;
}



/* 修改个人信息 */
.settable{
  margin: auto;
}
.settable>tr{
  margin-bottom: 5px;
}

/* 修改密码 */
.setpassword{
  margin: auto;
}
</style>